export default function (arr) {
    const spans = arr
    var box = document.querySelector('.rightbox .box .span .box')
    var svg = box.children[0]
    var height = box.offsetHeight
    var width = box.offsetWidth
    svg.setAttribute('height', height)
    svg.setAttribute('width', width)
    let fontsize = 24
    let R = width > height ? height / 2: width / 2
    let cx = width / 2
    let cy = height / 2
    let len = spans.length
    const _baseAngle = Math.PI / 360
    let speed = 1
    let angleX = speed * _baseAngle
    let angleY = - speed * _baseAngle
    let tags = []
    for (let i = 0; i < len; i++) {
        var angleA = Math.acos((2 * (i + 1) - 1) / len - 1);
        var angleB = angleA * Math.sqrt(len * Math.PI);
        var z = R * Math.cos(angleA);
        var y = R * Math.sin(angleA) * Math.sin(angleB);
        var x = R * Math.sin(angleA) * Math.cos(angleB);
        tags.push({ele: spans[i].name, x, y, z,id:spans[i].id})
        draw(tags[i])
    }

    function draw(tag) {
        var a = document.createElementNS('http://www.w3.org/2000/svg', 'a')
        a.setAttribute('href','/tag?tag='+tag.id)
        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
        let r = Math.ceil(Math.random() * 255)
        let g = Math.ceil(Math.random() * 100)
        let b = Math.ceil(Math.random() * 255)
        text = setext(text, tag)
        text.setAttribute('fill', `rgb(${r},${g},${b})`)
        text.appendChild(document.createTextNode(tag.ele))
        a.appendChild(text)
        svg.appendChild(a)
    }
    function setext(text, tag) {
        let x = tag.x + cx
        let y = tag.y + cy
        let s = (tag.z + R) / (2 * R)
        text.setAttribute('fonsize', fontsize * s)
        text.setAttribute('x', x)
        text.setAttribute('y', y)
        text.setAttribute('fill-opacity', s)
        return text;
    }
    function rotateX() {
        let cos = Math.cos(angleX),
            sin = Math.sin(angleX);
        for (let i = 0; i < len; i++) {
            let tag = tags[i]
                let x,
                    y,
                    z
                y = tag.y * cos - tag.z * sin
                z = tag.z * cos + tag.y * sin
                tags[i].y = y
                tags[i].z = z
                let ele = svg.children[i].children[0]
            setext(ele, tags[i])
        }
    }
    function rotateY() {
        let cos = Math.cos(angleY),
            sin = Math.sin(angleY);
        for (let i = 0; i < len; i++) {
            let tag = tags[i]
                let x,
                    y,
                    z
                x = tag.x * cos - tag.z * sin
                z = tag.z * cos + tag.x * sin
                tags[i].x = x
                tags[i].z = z
                let ele = svg.children[i].children[0]
            setext(ele, tags[i])
        }
    }
    var timer = setInterval(() => {
        speed = 5
        rotateX()
        rotateY()
    }, 30);
}
